Skip to content

refactor(TIL): detail page 리팩토링 #633

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 8 commits into from
Nov 4, 2025
Merged

refactor(TIL): detail page 리팩토링 #633

merged 8 commits into from
Nov 4, 2025

Conversation

@al-bur
Copy link
Collaborator

@al-bur al-bur commented Nov 2, 2025

📝 Key Changes

  • detail page 리팩토링합니다

🗂️ 파일 구조 변화

Before (main 브랜치)

PostDetail.tsx (512줄)
├─ 모든 UI 컴포넌트
├─ 모든 비즈니스 로직
├─ 상태 관리
└─ 에러 처리

After (현재 브랜치)

PostDetail/
├─ index.tsx (51줄)           - 레이아웃 조합
├─ ContentBody.tsx (26줄)      - 본문 영역 조합
├─ PostHeader.tsx (87줄)       - 작성자 정보
├─ PostContent.tsx (46줄)      - 제목 + 본문
├─ PostReactions.tsx (30줄)    - 좋아요/업보트
├─ CommentInput.tsx (152줄)    - 댓글 입력
└─ CommentsSection.tsx (21줄)  - 댓글 리스트

hooks/
└─ useDiscussionReactions.ts (63줄) - 반응 처리 로직

🎨 화면 구조와 코드 매칭되도록 리팩토링

화면 레이아웃

┌─────────────────────────────────────┐
│  PostHeader                         │  ← 작성자 아바타, 이름, 시간
│  (아바타 + @username · 시간)         │
├─────────────────────────────────────┤
│  PostContent                        │  ← 제목 + 본문
│  (제목)                             │
│  (마크다운 본문)                     │
├─────────────────────────────────────┤
│  PostReactions                      │  ← 좋아요/업보트 버튼
│  (❤️ 좋아요  👍 업보트)              │
├─────────────────────────────────────┤
│  ─────────────────────────────      │  ← 디바이더
├─────────────────────────────────────┤
│  CommentInput                       │  ← 댓글 작성 영역
│  (아바타 + 입력창 + 작성 버튼)       │
├─────────────────────────────────────┤
│  ─────────────────────────────      │  ← 디바이더
├─────────────────────────────────────┤
│  CommentsSection                    │  ← 댓글 리스트
│  (CommentList)                      │
└─────────────────────────────────────┘

🖼️ Before and After Comparison

image
Before After

al-bur added 7 commits November 2, 2025 16:00
@al-bur
refactor: detail page내 <PostDetail /> <WeeklyTop5 /> 컴포넌트 suspense + …
21a655b 
…errorboundary 추가

- 기존에는 상위에서 api를 호출해서 내려주는 방식으로 되있었는데, 이를 PostDetail 내부에서 하도록 처리
- loading, error props을 받아서 이를 분기로 렌더링해주고있었어서, 컴포넌트 return에 도달하는 인지 시간이 길었었음. 그래서, 이를 usesuspensequery로 바꿔주고 에러바운더리랑 서스펜스를 분리해줘서 관심사 분리를 해줌
@al-bur
refactor: PostDetail 컴포넌트 내부 1차 리팩토링 할 것들 정리
f4f3333 
- 디테일 페이지에 들어오면 왼쪽 오른쪽 섹션이 있고, 왼쪽 섹션에서는 본문 댓글입력, 댓글들 이렇게 파트들이 나눠져있음 => 이에 대한 UI가 코드에도 보이도록 리팩토링 게획 세우기
@al-bur
wip
1df9e69
@al-bur
refactor: 디테일 페이지내 컴포넌트 각각 분리
b90b5c8
@al-bur
refactor: ContentBody 컴포넌트 리팩토링
8b935c6 
- 영역별로 컴포넌트 나눠줘서 화면과 1대1 매칭 해주기
@al-bur
feat: divider 복원
00e16c2
@al-bur
refactor: lint:fix
6a2a671
@vercel
Copy link

vercel bot commented Nov 2, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
frontend-fundamentals Error Error Nov 2, 2025 1:34pm

@al-bur al-bur force-pushed the refactor/detail-page branch from b809733 to 0d13d70 Compare November 2, 2025 13:33
milooy
milooy approved these changes Nov 4, 2025
View reviewed changes
Copy link
Collaborator

@milooy milooy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@milooy milooy merged commit 45f484d into main Nov 4, 2025
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@milooy milooy milooy approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@al-bur @milooy